<template>
  <div class="dialog-container">
    <el-dialog :visible.sync="showAdd" width="50%" :title="titles[btnType]" :before-close="handleClose">

      <el-form :model="form" label-width="200px">
        <el-form-item>
          <span slot="label">
            <must /><span>接口资源编码</span>
          </span>
          <el-input v-model="form.apiCode" v-validate="'required|max:200'" name="接口资源编码" placeholder="请输入接口资源编码"
            style="width: 70%;" />
          <span v-show="errors.has('接口资源编码')" style="color: red;">{{ errors.first('接口资源编码') }}</span>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <must /><span>接口资源名称</span>
          </span>
          <el-input v-model="form.apiName" v-validate="'required|max:500'" name="接口资源名称" placeholder="请输入接口资源名称"
            style="width: 70%;"></el-input>
          <span v-show="errors.has('接口资源名称')" style="color: red;">{{ errors.first('接口资源名称') }}</span>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <must /><span>接口资源URI</span>
          </span>
          <el-input v-model="form.apiUri" v-validate="'required|max:500'" name="接口资源URI" placeholder="请输入接口资源URI"
            style="width: 70%;"></el-input>
          <span v-show="errors.has('接口资源URI')" style="color: red;">{{ errors.first('接口资源URI') }}</span>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <must /><span>接口资源请求方法</span>
          </span>
          <el-select v-model="form.apiMethod" placeholder="请选择接口资源请求方法" style="width: 70%;">
            <el-option v-for="(val, key) in allDictData.methodOps" :label="val" :key="key" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.orderNum" max="999" type="number" style="width: 30%;" />
        </el-form-item>
        <el-form-item label="记录日志">
          <el-radio-group v-model="form.log" name="记录日志" v-validate="'required'">
            <el-radio-button :label="0">否</el-radio-button>
            <el-radio-button :label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status" name="状态" v-validate="'required'">
            <el-radio-button v-for="(val, key) in allDictData.statusOps" :label="key" :key="key">{{val}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleClose" type="danger">关 闭</el-button>
        <el-button @click="handleSave" type="primary" :disabled="btnDisabled">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /* mixins */
  import addUpdateMixin from '@/mixins/addUpdate/addUpdateMixin.js'

  export default {
    /* 常量管理 - 添加 修改页面  */
    name: 'constant-add',
    data() {
      return {
        form: {
          menuId: '',
          apiCode: '',
          apiName: '',
          apiUri: '',
          apiMethod: '1',
          orderNum: 1,
          log: 1,
          status: 1,
        },
      }
    },
    mixins: [addUpdateMixin],
    props: ['allDictData', 'menuId'],
    mounted() {
      this.form.menuId = this.menuId
    },
    methods: {

    } // methods end
  }
</script>

<style scoped>
  @import "~@/styles/form.css";
</style>
